<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="login.css"/>
	<!-- <script type="text/javascript">
		window.onload= function() {		
			var btn = document.querySelector("button");
			btn.onclick= function() {
				var box = document.querySelector(".box");
				box.style.display="flex";
			}
			
			var close = document.querySelector(".close");
			close.onclick= function() {
				var box = document.querySelector(".box");
				box.style.display= "none";
			}
		}
		
	</script> -->
	<script type="text/javascript">
		window.onload =function(){
			var btns = document.querySelectorAll(".box .title a")
		var forms = document.querySelectorAll(".box .title form")
		
		for (var i =0; i < btns.length; i++){
			btns[i].onclick = function(){
				console.log(i);
				for (var j = 0; j < btns.length; j++) {
					btns[j].className = "";
				}
				this.className = "active";
				var idx = this.attributes["data-idx"].value;
				for (var j = 0; j < forms.length; j++) {
					forms[j].style.display="none";
				}
				forms[idx].style.display="block";
			}
		}
		}
	</script>
	</head>
	<body>
		<!-- <button type="button">显示登录框</button>
		<div class="box">
			<div class="content">
				<span class="close">&times;</span>
			</div>
		</div> -->
		<div class="content">
			<div class="box">
			<div class="right">
				<div class="title">
					<a href="#" class="active" data-inx="0">登录</a>
					<a href="#" data-inx="1">注册</a>
				</div>
				<div class="text">					
				<form action="#" method="get">
					<div>
						<input type="text" name="name" id="name"  />
					</div>
					<div>
						<input type="password" name="pwd" id="pwd"  />
					</div>
					<div>
						<input type="checkbox" name="chk" id="chk" />
						<label for="chk">自动登录</label>
						
					</div>
					<div>
						<input type="submit" value="登录" />
						</div>
				</form>
				<form action="#" method="get">
					<input type="submit"  value="...." />
				</form>
				
			</div>
			</div>
		</div>
		</div>
	</body>
</html>
